<template>
    <div class="ApproveQuery">
        <div class="queryForm">
            <el-form :model="targetForm" :inline="true">
                <el-form-item label="审批状态" label-width="100">
                    <el-select v-model="targetForm.targetStatue" placeholder="请输入菜单状态">
                        <el-option label="全部" value="" />
                        <el-option label="待审批" value="1" />
                        <el-option label="审批中" value="2" />
                        <el-option label="审批拒绝" value="3" />
                        <el-option label="审批通过" value="4" />
                        <el-option label="作废" value="5" />
                    </el-select>
                </el-form-item>
                <el-form-item label-width="100">
                    <el-button type="primary" @click="search">查询</el-button>
                    <el-button @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
            <!-- <query-form
                :form="searchLabel"
                v-model="targetForm"
                @searchHandler="search"
                @cancelHandler="reset"
            ></query-form> -->
        </div>
        <div class="baseTable">
            <div class="action">
                <el-button type="primary" @click="approveAdd">新增</el-button>
            </div>
            <el-table ref="listRef" :data="approveList" style="width: 100%" row-key="_id">
                <el-table-column
                    v-for="ele in columns"
                    :key="ele.prop"
                    :prop="ele.prop"
                    :label="ele.label"
                    :formatter="ele.formatter"
                    :width="ele.width"
                />
                <el-table-column label="操作" min-width="120">
                    <template #default="scope">
                        <el-button @click="queryBtn(scope.row)">查看</el-button>
                        <el-popconfirm
                            confirm-button-text="是"
                            cancel-button-text="不是"
                            title="确定要作废吗?"
                            @confirm="delHandler(scope.row)"
                        >
                            <template #reference>
                                <el-button type="danger" v-show="scope.row.applyState != 5">
                                    作废
                                </el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pages">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="totalPage"
                    @current-change="pageChange"
                />
            </div>
        </div>
        <el-dialog v-model="queryDialog">
            <el-steps :active="queryForm.applyState" align-center>
                <el-step title="待审批" />
                <el-step title="审批中" />
                <el-step title="审批结果" />
            </el-steps>
            <el-form :model="queryForm" ref="queryRef">
                <el-form-item label="休假类型:" prop="applyType" label-width="100">
                    {{ applyTypeSig }}
                </el-form-item>
                <el-form-item label="休假时间:" prop="startToEnd" label-width="100">
                    {{ queryForm.startToEnd }}
                </el-form-item>
                <el-form-item label="休假时长:" prop="leaveTime" label-width="100">
                    {{ queryForm.leaveTime }}
                </el-form-item>
                <el-form-item label="休假原因:" prop="reasons" label-width="100">
                    {{ queryForm.reasons }}
                </el-form-item>
                <el-form-item label="审批状态:" prop="applyState" label-width="100">
                    {{ applyStateSig }}
                </el-form-item>
                <el-form-item label="当前审批人:" prop="curAuditUserName" label-width="100">
                    {{ queryForm.curAuditUserName }}
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="addDialog" @close="close">
            <el-form :model="addForm" ref="addRef" :rules="rules">
                <el-form-item label="休假类型:" prop="applyType" label-width="100">
                    <el-select v-model="addForm.applyType" placeholder="请选择休假类型">
                        <el-option key="1" label="事假" :value="1" />
                        <el-option key="2" label="调休" :value="2" />
                        <el-option key="3" label="年假" :value="3" />
                    </el-select>
                </el-form-item>
                <el-form-item label="休假时间:" prop="startToEnd" label-width="100">
                    <div class="chooseTime">
                        <el-date-picker
                            v-model="addForm.startToEnd"
                            type="datetimerange"
                            range-separator="-"
                            start-placeholder="选择开始时间"
                            end-placeholder="选择结束时间"
                            :disabledDate="dateLimit"
                        />
                    </div>
                </el-form-item>
                <el-form-item label="休假时长:" label-width="100">
                    {{ leaveTimeRander }}
                </el-form-item>
                <el-form-item label="休假原因:" prop="reasons" label-width="100">
                    <el-input
                        v-model="addForm.reasons"
                        :rows="2"
                        type="textarea"
                        placeholder="请输入休假原因"
                    />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel(addRef)">取消</el-button>
                    <el-button type="primary" @click="submit(addRef)">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { computed, reactive, ref, toRaw } from 'vue';
import { ElMessage } from 'element-plus';
import api from '../api';
import utils from '../utils';

/*表单相关对象*/
let approveRequestData = {
    type: '',
    applyState: '',
    pageNum: 1,
    pageSize: 10,
};
const columns = reactive([
    {
        label: '单号',
        prop: 'orderNo',
    },
    {
        label: '申请人',
        prop: 'applyUser.userName',
        width: 100,
    },
    {
        label: '休假时间',
        prop: 'startToEnd',
    },
    {
        label: '休假时长',
        prop: 'leaveTime',
    },
    {
        label: '休假类型',
        prop: 'applyType',
        formatter(row, column, value) {
            return {
                1: '事假',
                2: '调休',
                3: '年假',
            }[value];
        },
    },
    {
        label: '休假原因',
        prop: 'reasons',
    },
    {
        label: '申请时间',
        prop: 'createTime',
        formatter: (row, column, value) => {
            return utils.formateDate(new Date(value));
        },
    },
    {
        label: '审批人',
        prop: 'auditUsers',
    },
    {
        label: '当前审批人',
        prop: 'curAuditUserName',
    },
    {
        label: '审批状态',
        prop: 'applyState',
        formatter(row, column, value) {
            return {
                1: '待审批',
                2: '审批中',
                3: '审批拒绝',
                4: '审批通过',
                5: '作废',
            }[value];
        },
    },
]);
const targetForm = reactive({
    targetStatue: '',
});
const searchLabel = [
    {
        type: 'select',
        label: '审批状态',
        prop: 'targetStatue',
        placeholder: '请选择菜单状态',
        option: [
            {
                value: '',
                label: '全部',
            },
            {
                value: 1,
                label: '待审批',
            },
            {
                value: 2,
                label: '审批中',
            },
            {
                value: 3,
                label: '审批拒绝',
            },
            {
                value: 4,
                label: '审批通过',
            },
            {
                value: 5,
                label: '作废',
            },
        ],
    },
];
const approveList = ref([]);
const queryForm = ref({});
const addForm = reactive({});
const rules = reactive({
    applyType: {
        required: true,
        message: '请选择休假类型',
        trigger: 'blur',
    },
    startToEnd: {
        required: true,
        message: '请选择休假时间',
        trigger: 'blur',
    },
    reasons: {
        required: true,
        message: '请输入休假理由',
        trigger: 'blur',
    },
});
/*普通变量*/
const listRef = ref(null);
const queryDialog = ref(false);
const addDialog = ref(false);
const addRef = ref(null);
const totalPage = ref(null);

let applyTypeSig = ref('');
let applyStateSig = ref('');
let leaveTimeRander = computed(() => {
    if (addForm.startToEnd) {
        let sT = +addForm.startToEnd[0];
        let eT = +addForm.startToEnd[1];
        return getDuration(sT, eT);
    } else {
        return '0天';
    }
});
const active = ref(0);
/*请求*/
const getApproveList = async () => {
    let { list, page } = await api.getApproveList(approveRequestData);
    totalPage.value = page.total;
    list.forEach(ele => {
        let sT = utils.formateDate(new Date(ele.startTime)).slice(0, 10);
        let eT = utils.formateDate(new Date(ele.endTime)).slice(0, 10);
        ele['startToEnd'] = sT + '到' + eT;
    });
    approveList.value = list;
};
/*其他函数*/
const getDuration = (sT, eT) => {
    let duration = eT - sT;
    if (duration > 0) {
        return `${Math.ceil(duration / (1000 * 60 * 60 * 24))}天`;
    } else {
        return '0天';
    }
};
const dateLimit = date => {
    let datechosen = +date;
    let dateToday = +new Date();
    return datechosen < dateToday ? true : false;
};
/*按钮函数*/
const queryBtn = row => {
    switch (row.applyType) {
        case 1:
            applyTypeSig.value = '事假';
            break;
        case 2:
            applyTypeSig.value = '调休';
            break;
        case 3:
            applyTypeSig.value = '年假';
            break;

        default:
            break;
    }
    switch (row.applyState) {
        case 1:
            applyStateSig.value = '待审批';
            break;
        case 2:
            applyStateSig.value = '审批中';
            break;
        case 3:
            applyStateSig.value = '审批拒绝';
            break;
        case 4:
            applyStateSig.value = '审批通过';
            break;
        case 5:
            applyStateSig.value = '作废';
            break;

        default:
            break;
    }
    queryForm.value = row;
    queryDialog.value = !queryDialog.value;
};
const approveAdd = () => {
    addDialog.value = !addDialog.value;
};
const submit = form => {
    form.validate(async vaild => {
        if (vaild) {
            try {
                let data = toRaw(addForm);
                data['startTime'] = data.startToEnd[0];
                data['endTime'] = data.startToEnd[1];
                data['action'] = 'create';
                data['leaveTime'] = getDuration(data.startToEnd[0], data.startToEnd[1]);
                data['applyState'] = 1;
                delete data['startToEnd'];
                console.log(data);
                await api.createApprove(data);
                addDialog.value = !addDialog.value;
                form.resetFields();
                getApproveList();
                ElMessage({
                    message: '提交成功',
                    type: 'success',
                });
            } catch (error) {
                console.log(error);
                ElMessage.error('提交失败');
            }
        }
    });
};
const cancel = form => {
    addDialog.value = !addDialog.value;
    form.resetFields();
};
const close = () => {
    addRef.value.resetFields();
};
const delHandler = async row => {
    let data = { ...row, action: 'delete' };
    await api.createApprove(data);
    getApproveList();
};
const search = () => {
    approveRequestData.applyState = targetForm.targetStatue;
    getApproveList();
};
const reset = () => {
    targetForm.targetStatue = '';
    approveRequestData.applyState = targetForm.targetStatue;
    getApproveList();
};
const pageChange = pages => {
    approveRequestData.pageNum = pages;
    getApproveList();
};
/*常驻调用*/
getApproveList();
</script>

<style lang="scss" scoped>
.queryForm {
    width: 100%;
    height: 65px;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding-top: 20px;
    padding-left: 40px;
}
.baseTable {
    margin-top: 20px;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    .action {
        width: 100%;
        height: 55px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f1f1f1;
        button {
            margin-left: 20px;
            font-weight: bold;
        }
    }
    .pages {
        margin-top: 20px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>
